<!-- 助力比赛报名 -->
<template>
  <div id="assist-competition" class="p-12" :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <template v-if="datas.form && datas.form.title">
      <div class="b-r-8 p-12 bg-white mb-8 sku-box" v-if="goods && goods.has_option">
        <div class="title f-bold f-15 mb-8 t-l" v-if="datas.sku_title">{{ datas.sku_title }}</div>
        <div class="sku" v-if="goods.has_option">
          <div @click.stop="onSelectSku(item.id)" class="sku-item" :class="{ active: activeSpec == item.id }" v-for="item in goods.has_many_options" :key="item.id">
            <span v-if="datas.show_sku_text">{{ item.title }} </span><span v-if="datas.show_sku_price"><small class="f-11">￥</small>{{ item.product_price }}</span>
          </div>
        </div>
      </div>

      <!--表单静态-->
      <div class="form-box b-r-8 p-12 bg-white">
        <div class="title f-bold f-15 t-l" v-if="datas.form && datas.form.title">{{ datas.form.title }}</div>
        <diyform :status="fieldStatus" ref="diyform" :field="field" v-on:submit="submit" v-if="field">
          <van-button style="height: 40px;" size="large" @click.native="submitSign" type="danger">立即报名</van-button>
        </diyform>
      </div>
    </template>

    <div v-else style="padding: 20px 0;text-align: center;">
      请选择活动
    </div>
  </div>
</template>

<script>
import diyform from "components/ui_components/yz_diyformV2";
// 自定义样式
const css = function() {
  if (this.datas.preview_color) {
    const { preview_color, sku_title_color, sku_item_color, sku_item_bg_color, sku_item_active_color, sku_item_active_bgcolor } = this.datas;

    return `
        .component-${this.id}{
            background-color: ${preview_color.color};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image || emptyImage : ""});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
        .component-${this.id} .sku-box .title{
          color: ${sku_title_color};
        }
        .component-${this.id} .sku-box .sku-item{
          color: ${sku_item_color};
          background-color: ${sku_item_bg_color};
        }
        .component-${this.id} .sku-box .active{
          color: ${sku_item_active_color};
          background-color: ${sku_item_active_bgcolor};
        }
    `;
  }
};
export default {
  props: ["id", "datas", "tabcontrol", "lastIndex", "index", "isBottom"],
  data() {
    return {
      goods: null,
      activeSpec: 0, // 选择的规格
      fieldStatus: 0,
      field: null
    };
  },

  created() {
    this.getData();
  },

  components: { diyform },

  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },

  mounted() {},

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get(
        "plugin.assist-competition.frontend.signup.get-signup-diyform",
        {
          activity_id: this.datas.form.id
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.goods = data.goods;
      this.field = data.diyform?.fields;
      if (this.goods && this.goods.has_option && this.goods.has_many_options.length) {
        this.activeSpec = this.goods.has_many_options[0].id;
      }
    },
    onSelectSku(id) {
      this.activeSpec = id;
    },
    submitSign() {
      if (Object.keys(this.field).length != 0) {
        // 有设置表单，先填写表单
        this.$refs.diyform.submit();
        return;
      }
      this.applyCompetition();
    },
    submit(e) {
      if (e) this.form_data = e;
      this.applyCompetition();
    },
    async applyCompetition() {
      if(this.lockSubmit) return;
      this.lockSubmit = true;

      let _type = this.goods ? "pay" : "signup"; // goods有值，需要走支付下单
      let _url = _type == "pay" ? "plugin.assist-competition.frontend.create" : "plugin.assist-competition.frontend.signup.signup-action";
      let assembleGoods = [{ goods_id: this.goods?.id, total: 1, option_id: this.activeSpec }];
      let _data = {
        activity_id: this.datas.form.id,
        form_data: this.form_data[0],
        dispatch_type_id: 0
      };
      if (_type == "pay") {
        _data.goods = JSON.stringify(assembleGoods);
      }
      let { result, msg, data } = await $http.post(_url, _data, ".");
      this.lockSubmit = false;
      if (result == 0) return this.$toast(msg);
      if (data.order_ids) {
        return this.$router.replace(
          this.fun.getUrl("orderpay", {
            status: "2",
            order_ids: data.order_ids
          })
        );
      }
      this.$dialog
        .alert({
          message: msg
        })
        .then(() => {
          // on close
        });
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.b-r-8 {
  border-radius: 0.5rem;
}
.bg-white {
  background-color: #ffffff;
}
.p-12 {
  padding: 0.75rem;
}
.mb-8 {
  margin-bottom: 0.5rem;
}
.sku {
  display: flex;
  flex-wrap: wrap;
  .sku-item {
    line-height: 1.875rem;
    padding: 0 0.625rem;
    background: #f5f5f5;
    margin: 0 0.75rem 0.75rem 0;
    border-radius: 0.375rem;
  }
}
</style>
